<template>
  <div>
    <el-card>
      <el-button type="primary" @click="addCate">添加分类</el-button>
      <MyTable
        rowKey="cat_id"
        v-model="queryModel"
        :total="total"
        :cols="cols"
        :data="list"
        :loading="queryLoading"
        @change="getList"
      >
        <template v-slot:available="{ row: { cat_deleted } }">
          <i
            :style="{ color: cat_deleted ? 'red' : 'green' }"
            :class="cat_deleted ? 'el-icon-error' : 'el-icon-success'"
          ></i>
        </template>
        <template v-slot:sort="{ row: { cat_level } }">
          <el-tag size="mini" :type="colors[cat_level]"
            >{{ levels[cat_level] }}级</el-tag
          >
        </template>
        <template v-slot:action="{ row }">
          <el-button
            size="mini"
            type="primary"
            @click="
              dialogVisible = true;
              form = { ...row };
            "
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="del(row)"
            >删除</el-button
          >
        </template>
      </MyTable>
      <!-- 添加 -->
      <el-dialog :title="title + '分类'" :visible.sync="dialogVisible">
        <el-form :model="form">
          <el-form-item label="分类名称" :label-width="formLabelWidth">
            <el-input v-model="form.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类" :label-width="formLabelWidth">
            <el-cascader
              v-model="cas"
              :options="options"
              :disabled="form.cat_id ? true : false"
              :props="{
                expandTrigger: 'hover',
                label: 'cat_name',
                value: 'cat_id',
              }"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addGetcate">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { pageMixins } from "@/Minins/BaseMixins";
import { getCateList, goodsfu, getCate, CateEdit, CateDel } from "@/api/user";
import { Message, MessageBox } from "element-ui";
export default {
  mixins: [pageMixins],
  data() {
    return {
      dialogVisible: false,
      levels: ["一", "二", "三"],
      handleChange: "",
      cas: [],
      form: {},
      options: [],
      formLabelWidth: "120px",
      colors: ["", "success", "warning"],
      cols: [
        {
          title: "#",
          type: "index",
        },
        {
          title: "分类名称",
          name: "cat_name",
        },
        {
          title: "是否有效",
          slot: "available",
        },
        {
          title: "分类排序",
          slot: "sort",
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          width: 200,
        },
      ],

      queryModel: {
        ...this.queryModel,
        type: 3,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //删除
    async del(row) {
      MessageBox.confirm("此操作将永久删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await CateDel(row.cat_id);
          this.getList();
          Message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          Message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //点击添加
    async addGetcate() {
      try {
        await (this.form.cat_id ? CateEdit : getCate)({
          ...this.form,
          cat_pid: this.cas[this.cas.length - 1] || 0,
          cat_level: this.cas.length || 0,
        });
        this.getList();
        Message.success(this.title + "成功");
      } catch (error) {}
      this.dialogVisible = false;
    },

    //点击确定弹出框
    async addCate() {
      try {
        this.form = {};
        this.dialogVisible = true;
        const data = await goodsfu();
        this.options = data;
        console.log(this.options);
      } catch (error) {}
    },
    //获取数据
    async getList() {
      try {
        this.queryLoading = true;
        const { total, result } = await getCateList(this.queryModel);
        this.list = result;
        this.total = total;
      } catch (error) {}
      this.queryLoading = false;
    },
  },
  computed: {
    title() {
      return this.form.cat_id ? "修改" : "添加";
    },
  },
};
</script>

<style scoped >
</style>
